import { MaterialModule } from '@angular/material';
import { AppComponentsService } from './components/app-components/app-components';
import { InitializationService } from './pages/initialization/index';
import { CommonComponentsService } from './components/common-components/common-components';
import { MdModule } from './md.module';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {
  NgModule,
  ApplicationRef,
  CUSTOM_ELEMENTS_SCHEMA,
  state
} from '@angular/core';
import {
  removeNgStyles,
  createNewHosts,
  createInputTransfer
} from '@angularclass/hmr';
import {
  RouterModule,
  PreloadAllModules
} from '@angular/router';
import { FlexLayoutModule } from '@angular/flex-layout';

/*
 * Platform and Environment providers/directives/pipes
 */
import { ENV_PROVIDERS } from './environment';
// App is our top level component
import { APP_RESOLVER_PROVIDERS } from './app.resolver';
import { NoContentComponent } from './pages/no-content';

const currentProject =  require('./../currentConfig').currentProject;
const {ROUTES,appModuleDeclarations = [],appModuleProviders=[],appEntryComponents=[]} = require(`./app.${currentProject}.module`);
const appCustomerComponent = require(`./app.${currentProject}.component`).appCustomerComponent; 

// Application wide providers
const APP_PROVIDERS = [
  ...APP_RESOLVER_PROVIDERS,
  ...appModuleProviders
];

type StoreType = {
  state:  {
  [key: string]: any
},
  restoreInputValues: () => void,
  disposeOldHosts: () => void
};

/**
 * `AppModule` is the main entry point into Angular2's bootstraping process
 */
@NgModule({
  bootstrap: [appCustomerComponent],
  declarations: [
    appCustomerComponent,
    ...appEntryComponents,
    AppComponentsService.current.forRoot(),
    CommonComponentsService.current.forRoot(),
    NoContentComponent,
    ...appModuleDeclarations
  ],
  imports: [ // import Angular's modules
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(ROUTES, { useHash: true, preloadingStrategy: PreloadAllModules }),
    MdModule.forRoot(),
    FlexLayoutModule,
    MaterialModule
  ],
  providers: [ // expose our Services and Providers into Angular's dependency injection
    ENV_PROVIDERS,
    APP_PROVIDERS
  ],
  entryComponents:[
    ...appEntryComponents
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule {

  constructor(
    public appRef: ApplicationRef,
  ) { }

  public hmrOnInit(store: StoreType) {
    if (!store || !store.state) {
      return;
    }
    console.log('HMR store', JSON.stringify(store, null, 2));
    // set state
    // set input values
    if ('restoreInputValues' in store) {
      let restoreInputValues = store.restoreInputValues;
      setTimeout(restoreInputValues);
    }

    this.appRef.tick();
    delete store.state;
    delete store.restoreInputValues;
  }

  public hmrOnDestroy(store: StoreType) {
    const cmpLocation = this.appRef.components.map((cmp) => cmp.location.nativeElement);
    // save state
    // recreate root elements
    store.disposeOldHosts = createNewHosts(cmpLocation);
    // save input values
    store.restoreInputValues = createInputTransfer();
    // remove styles
    removeNgStyles();
  }

  public hmrAfterDestroy(store: StoreType) {
    // display new elements
    store.disposeOldHosts();
    delete store.disposeOldHosts;
  }

}